<template>
    <div id="app">
        <div class="todo-container">
            <div class="todo-wrap">
                <Header @received="received"/>
                <List :todoList="todoList" :updateDone="updateDone" :deleteTodo="deleteTodo"/>
                <Footer :todoList="todoList" :checkAll="checkAll" :clearDone="clearDone"/>
            </div>
        </div>
    </div>
</template>

<script>
    import Header from "./components/Header";
    import List from "./components/List";
    import Footer from "./components/Footer";

    export default {
        name: "App",
        components: {
            Header,
            List,
            Footer
        },
        data() {
            return {
                todoList: [
                    {id: "001", title: "吃饭", done: true},
                    {id: "002", title: "睡觉", done: true},
                    {id: "003", title: "写代码", done: true},
                    {id: "004", title: "烫头发", done: false},
                ]
            }
        },
        methods: {
            // 接收输入框封装后的内容（添加）
            received(todoObj) {
                console.log(todoObj);
                this.todoList.unshift(todoObj);
            },
            // 更新完成状态（勾选或取消勾选）
            updateDone(id) {
                this.todoList.forEach(item => {
                    if (item.id === id) {
                        item.done = !item.done;
                        return ;
                    }
                });
            },
            // 删除todo
            deleteTodo(id) {
                // console.log(id);
                if (confirm("确定删除吗？")) {
                    this.todoList = this.todoList.filter(item => {
                        return item.id !== id;
                    });
                }
            },
            // 全选或全取消
            checkAll(done) {
                this.todoList.forEach(item => {
                    item.done = done;
                });
            },
            // 清除所有已完成的todo
            clearDone() {
                this.todoList = this.todoList.filter(item => {
                    return !item.done;
                });
            }
        },
        mounted() {
            this.$bus.$on("_UPDATE_DATA_", (todoObj) => {
                for (let i = 0; i < this.todoList.length; i++) {
                    if (this.todoList[i].id === todoObj.id) {
                        this.todoList[i].title = todoObj.title;
                    }
                }
            });
        },
        beforeDestroy() {
            this.$bus.$off("_UPDATE_DATA_");
        }
    }
</script>

<style lang="less">
    /*base*/
    body {
        background: #fff;
    }
    #app {
        margin-top: 5%;
    }
    .btn {
        display: inline-block;
        padding: 4px 12px;
        margin-bottom: 0;
        font-size: 14px;
        line-height: 20px;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
        border-radius: 4px;
    }

    .btn-danger {
        color: #fff;
        background-color: #da4f49;
        border: 1px solid #bd362f;
    }

    .btn-danger:hover {
        color: #fff;
        background-color: #bd362f;
    }

    .btn:focus {
        outline: none;
    }

    .todo-container {
        width: 600px;
        margin: 0 auto;
    }

    .todo-container .todo-wrap {
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
    }
    .f-r {
        color: red;
    }
    .btn-edit {
        color: #fff;
        background-color: #30b1ff;
        border: 1px solid #208f9f;
    }
    .btn-edit:hover {
        color: #fff;
        background-color: #208f9f;
    }
</style>